<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="" />
		<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />
		<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
		<script src="js/jquery.fullPage.js" type="text/javascript">
		</script>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

	</head>

	<body>
		<div id="fullpage">
			<!--首页S-->
			<div class="section index">
				<!--1 logo-->
				<div class="melon1 animated bounce"><img src="img/first/kugou-logo.png" /></div>
				<!--2 2016-->
				<div class="melon2 animated flash"><img src="img/first/kugou-_0000s_0000_1.png" /></div>
				<!--3 hold-->
				<div class="melon3 animated pulse"><img src="img/first/kugou-_0000s_0001_2.png" /></div>
				<!--4 year-->
				<div class="melon4 animated rubberBand"><img src="img/first/kugou-_0000s_0002_3.png" /></div>
				<!--5 yun1-->
				<div class="melon5 animated fadeInUpBig"><img src="img/first/kugou-_0004_.png" /></div>
				<!--6 yun2-->
				<div class="melon6 animated fp-slidesNav"><img src="img/first/kugou-_0006_2.png" /></div>
				<!--7 faner-->
				<div class="melon7 animated jello"><img src="img/first/kugou-_0000s_0003_4.png" /></div>
				<!--8 yun3-->
				<div class="melon8 animated bounceInUp"><img src="img/first/kugou-_0005_1.png" /></div>
				<!--9 guang-->
				<div class="melon9 animated flash "><img src="img/first/kugou-_0009_.png" /></div>
				<!--10 yun4-->
				<div class="melon10 animated lightSpeedIn"><img src="img/first/kugou-_0007_3.png" /></div>
				<!--11 yun5-->
				<div class="melon11 animated fadeIn"><img src="img/first/kugou-_0008_4.png" /></div>
				<!--12 man-->
				<div class="melon12 animated rollIn"><img src="img/first/kugou-_0002_.png" /></div>
				<!--13 miyue-->
				<div class="melon13 animated bounceInLeft"><img src="img/first/kugou-_0001s_0003_.png" /></div>
				<!--14 qizhi-->
				<div class="melon14 animated bounceInLeft"><img src="img/first/kugou-_0001s_0000_.png" /></div>
				<!--15 what-->
				<div class="melon15 animated bounceInRight"><img src="img/first/kugou-_0001s_0002_.png" /></div>
				<!--16 taizi-->
				<div class="melon16 animated fadeInLeftBig"><img src="img/first/kugou-_0001s_0001_.png" /></div>
				<!--17 start-->
				<div class="melon17 animated flipInY"><img src="img/first/kugou-_0000_.png" /></div>
				<!--18 moon-->
				<div class="melon18 animated flipInX"><img src="img/first/kugou-_0003_.png" /></div>
			</div>
			<!--首页E-->
			<!--page 1 S-->
			<div class="section page1 ">
				<!--1 first-->
				<div class="srll1 animated"><img src="img/second/kugou-first.png" /></div>
				<!--2 photo-->
				<div class="srll2 animated"><img src="img/second/kugou-_0000__01.png" /></div>
				<!--3 yun1-->
				<div class="srll3 animated"><img src="img/second/kugou-_0001s_0005_1.png" /></div>
				<!--4 yun2-->
				<div class="srll4 animated"><img src="img/second/1.png" /></div>
				<!--5 yun3-->
				<div class="srll5 animated"><img src="img/second/kugou-_0001s_0007_3.png" /></div>
				<!--6 Aback-->
				<div class="srll6 animated"><img src="img/second/kugou-_0000s_0004_.png" /></div>
				<!--7 Acont-->
				<div class="srll7 animated"><img src="img/second/kugou-_0000s_0003_A-.png" /></div>
				<!--8 Bback-->
				<div class="srll8 animated"><img src="img/second/kugou-_0000s_0005_.png" /></div>
				<!--9 Bcont-->
				<div class="srll9 animated "><img src="img/second/kugou-_0000s_0002_B-.png" /></div>
				<!--10 Cback-->
				<div class="srll10 animated"><img src="img/second/kugou-_0000s_0005_.png" /></div>
				<!--11 Ccont-->
				<div class="srll11 animated"><img src="img/second/kugou-_0000s_0001_C-.png" /></div>
				<!--12 Dback-->
				<div class="srll12 animated"><img src="img/second/kugou-_0000s_0005_.png" /></div>
				<!--13 Dcont-->
				<div><img src="img/second/kugou-_0000s_0000_D-.png" /></div>
				<!--14 yin1-->
				<div><img src="img/second/kugou-_0001s_0000_5_02.png" /></div>
				<!--15 yin2-->
				<div><img src="img/second/kugou-_0001s_0001_4_01.png" /></div>
				<!--16 yin3-->
				<div><img src="img/second/kugou-_0001s_0002_3.png" /></div>
				<!--17 yin4-->
				<div><img src="img/second/kugou-_0001s_0003_.png" /></div>
				<!--18 yin5-->
				<div><img src="img/second/kugou-_0001s_0004_1.png" /></div>
				<!--19 man-->
				<div><img src="img/second/kugou-_0001s_0008_.png" /></div>

			</div>
			<!--page 1 E-->
			<div class="section page2">
				<div class="question_txt xcenter">
					<p>2.“削个椰子皮，你却TM给个梨”</p>
					<span>请问这是什么歌？</span>
				</div>
				<!--问题图片-->
				<div class="question_img xcenter photo_height animated "><img src="img/page2/hulu.png" /></div>
				<!--云  S-->
				<div class="cloud1 cloud animated infinite"><img src="img/page1/cloud1.png" /></div>
				<div class="cloud2 cloud animated infinite"><img src="img/page1/cloud2.png" /></div>
				<div class="cloud3 cloud animated infinite"><img src="img/page1/cloud3.png" /></div>
				<div class="cloud4 cloud animated infinite"><img src="img/page2/cloud4.png" /></div>
				<div class="cloud5 cloud animated infinite"><img src="img/page1/cloud2.png" /></div>
				<!--云  E-->
				<!--音符  S-->
				<div class="note1 note animated delay_1"><img src="img/page1/note1.png" /></div>
				<div class="note2 note animated delay_2"><img src="img/page1/note2.png" /></div>
				<div class="note3 note animated delay_3"><img src="img/page1/note3.png" /></div>
				<div class="note4 note animated delay_4"><img src="img/page1/note4.png" /></div>
				<div class="note5 note animated delay_5"><img src="img/page1/note5.png" /></div>
				<!--音符  E-->
				<div class="dog animated jackInTheBox"><img src="img/page2/dog2.png" /></div>
				<!--问题选项-->
				<div class="questionA question_bg animated">
					<p><span>A</span>《Yogurt》</p>
				</div>
				<div class="questionB question_bg animated  delay_2">
					<p><span>B</span>《Salt》</p>
				</div>
				<div class="questionC question_bg animated  delay_3">
					<p><span>C</span>《Sugar》</p>
				</div>
				<div class="questionD question_bg animated  delay_4">
					<p><span>D</span>《Salad》</p>
				</div>
			</div>
			<!--内页  3-->
			<div class="section page3">
				<div class="question_txt xcenter">
					<p>3.“啊啊 啊啊 啊啊啊”</p>
					<span>请问这是什么歌？</span>
				</div>
				<!--问题图片-->
				<div class="question_img xcenter photo_height animated zoomIn"><img src="img/page3/kid.png" /></div>
				<!--云  S-->
				<div class="cloud1 cloud animated infinite"><img src="img/page1/cloud1.png" /></div>
				<div class="cloud2 cloud animated infinite"><img src="img/page1/cloud2.png" /></div>
				<div class="cloud3 cloud animated infinite"><img src="img/page1/cloud3.png" /></div>
				<div class="cloud4 cloud animated infinite"><img src="img/page2/cloud4.png" /></div>
				<div class="cloud5 cloud animated infinite"><img src="img/page1/cloud2.png" /></div>
				<!--云  E-->
				<!--音符  S-->
				<div class="note1 note animated delay_1"><img src="img/page1/note1.png" /></div>
				<div class="note2 note animated delay_2"><img src="img/page1/note2.png" /></div>
				<div class="note3 note animated delay_3"><img src="img/page1/note3.png" /></div>
				<div class="note4 note animated delay_4"><img src="img/page1/note4.png" /></div>
				<div class="note5 note animated delay_5"><img src="img/page1/note5.png" /></div>
				<!--音符  E-->
				<div class="dog animated jackInTheBox"><img src="img/page3/dog3.png" /></div>
				<!--问题选项-->
				<div class="questionA question_bg animated">
					<p><span>A</span>《新白娘子传奇》</p>
				</div>
				<div class="questionB question_bg animated delay_2">
					<p><span>B</span>《当》</p>
				</div>
				<div class="questionC question_bg animated delay_3">
					<p><span>C</span>《忐忑》</p>
				</div>
				<div class="questionD question_bg animated delay_4">
					<p><span>D</span>《Concerto Pour》</p>
				</div>
			</div>
			<!--好友评价页面-->
			<div class="section evaluate">
				<!--logo-->
				<div class="logo">
					<a href=""><img src="img/logo.png" /></a>
				</div>
				<div class="evaluate_dog xcenter"><img src="img/evaluate/evaluate_dog.png" /></div>
				<div class="evaluate_tit1 xcenter"><img src="img/evaluate/evaluate_tit1.png" /></div>
				<div class="evaluate_tit2 xcenter"><img src="img/evaluate/evaluate_tit2.png" /></div>
				<div class="evaluate_tit3"><img src="img/evaluate/evaluate_tit3.png" /></div>
				<div class="evaluate_tit4"><img src="img/evaluate/evaluate_tit4.png" /></div>
				<div class="evaluate_00 animated evaluate_hous"><img src="img/evaluate/evaluate_00.png" /></div>
				<div class="evaluate_70 animated evaluate_hous"><img src="img/evaluate/evaluate_70.png" /></div>
				<div class="evaluate_90 animated evaluate_hous"><img src="img/evaluate/evaluate_90.png" /></div>
				<div class="evaluate_95 animated evaluate_hous"><img src="img/evaluate/evaluate_95.png" /></div>
				<div class="evaluate_tit5"><img src="img/evaluate/evaluate_tit5.png" /></div>
				<!--文本框-->
				<div class="evaluate_txt"><textarea name="evaluate"></textarea></div>
				<!--按钮-->
				<a class="sub_btn">提交</a>
				<a class="play_btn">我也要玩</a>
				<!--提示分析遮罩层-->
				<div class="share_mask animated fadeInDown">
					<div class="share_dog xcenter"><img src="img/evaluate/share_dog.png" /></div>
					<div class="share_txt xcenter"><img src="img/evaluate/share_txt.png" /></div>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			$(document).ready(function() {
				var sub=document.querySelector(".sub_btn");
			sub.addEventListener("touchstart",function(){
				sub.classList.add("sub_btn_active")
			})
			
			var play=document.querySelector(".play_btn");
			play.addEventListener("touchstart",function(){
				document.getElementsByClassName("share_mask")[0].style.display='block';
				play.classList.add("play_btn_active");
			})
				$('#fullpage').fullpage({
					
					afterLoad: function(anchorLink, index) {
						if(index == 1) {
							document.querySelector(".melon1").classList.add("bounce");
							document.querySelector(".melon2").classList.add("flash");
							document.querySelector(".melon3").classList.add("pulse");
							document.querySelector(".melon4").classList.add("rubberBand");
							document.querySelector(".melon5").classList.add("fadeInUpBig");
							document.querySelector(".melon6").classList.add("slidesNav");
							document.querySelector(".melon7").classList.add("jello");
							document.querySelector(".melon8").classList.add("bounceInUp");
							document.querySelector(".melon9").classList.add("flash");
							document.querySelector(".melon10").classList.add("lightSpeedIn");
						} else {
							document.querySelector(".melon1").classList.remove("bounce");
							document.querySelector(".melon2").classList.remove("flash");
							document.querySelector(".melon3").classList.remove("pulse");
							document.querySelector(".melon4").classList.remove("rubberBand");
							document.querySelector(".melon5").classList.remove("fadeInUpBig");
							document.querySelector(".melon6").classList.remove("slidesNav");
							document.querySelector(".melon7").classList.remove("jello");
							document.querySelector(".melon8").classList.remove("bounceInUp");
							document.querySelector(".melon9").classList.remove("flash");
							document.querySelector(".melon10").classList.remove("lightSpeedIn");
						}
						if(index == 2) {
							document.querySelector(".srll1").classList.add("bounce");
							document.querySelector(".srll2").classList.add("flash");
							document.querySelector(".srll3").classList.add("pulse");
							document.querySelector(".srll4").classList.add("rubberBand");
							document.querySelector(".srll5").classList.add("fadeInUpBig");
							document.querySelector(".srll6").classList.add("slidesNav");
							document.querySelector(".srll7").classList.add("jello");
							document.querySelector(".srll8").classList.add("bounceInUp");
							document.querySelector(".srll9").classList.add("flash");
							document.querySelector(".srll10").classList.add("lightSpeedIn");
							document.querySelector(".srll11").classList.add("fadeIn");
							document.querySelector(".srll12").classList.add("rollIn");
						} else {
							document.querySelector(".srll1").classList.remove("bounce");
							document.querySelector(".srll2").classList.remove("flash");
							document.querySelector(".srll3").classList.remove("pulse");
							document.querySelector(".srll4").classList.remove("rubberBand");
							document.querySelector(".srll5").classList.remove("fadeInUpBig");
							document.querySelector(".srll6").classList.remove("slidesNav");
							document.querySelector(".srll7").classList.remove("jello");
							document.querySelector(".srll8").classList.remove("bounceInUp");
							document.querySelector(".srll9").classList.remove("flash");
							document.querySelector(".srll10").classList.remove("lightSpeedIn");
							document.querySelector(".srll11").classList.remove("fadeIn");
							document.querySelector(".srll12").classList.remove("rollIn");
						}

					}

				})
			});
		</script>
	</body>

</html>